{% extends "master.html" %} {% block title %}{% end %} {% block header%}
<link href="{{static_url('theme/plugins/datatables/datatables.bootstrap.css')}}" rel="stylesheet">
<link href="{{static_url('theme/plugins/select2/select2.min.css')}}" rel="stylesheet">
{% end %} {% block content_header_title%}用户{% end %}
{% block content_header_subtitle%}
<a href="#" class="btn btn-default btn-xs" onclick="bo_user_edit_swith('新增用户', '创建');">新增</a>
{% end %}
{% block content_body%}
<div class="box" id="user-list-panel">
    <div class="box-body">
        <table id="bo_users_list" class="table table-bordered table-hover dataTable" role="grid">
            <thead>
            <tr>
                <th><input type="checkbox" onclick="bo_datatables_sel_all(this);" class="bo_datatables_row_checkbox"/>
                </th>
                <th>用户名</th>
                <th>昵称</th>
                <th>邮件</th>
                <th>手机</th>
                <th>状态</th>
                <th>显示名称</th>
                <th>注册时间</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th><input type="checkbox" onclick="bo_datatables_sel_all(this);" class="bo_datatables_row_checkbox"/>
                </th>
                <th>用户名</th>
                <th>昵称</th>
                <th>邮件</th>
                <th>手机</th>
                <th>状态</th>
                <th>显示名称</th>
                <th>注册时间</th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="box box-primary" id="user-edit-panel">
    <div class="box-header with-border">
        <h3 class="box-title" id="user-edit-panel-title">用户资料</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" onclick="bo_user_edit_panel_return();"><i
                    class="fa fa-times"></i></button>
        </div>
    </div>
    <div class="box-body">
        <form id="user-edit-form">
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="user_roles">角色</label>
                        <select class="select2-roles form-control" id="user_roles" name="user_roles" multiple="multiple" style="width:100%">
                            {% for role in roles %}
                            <option value="{{role}}">{{roles[role][0]}}</option>
                            {% end %}
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="user_login">登录名</label>
                        <input type="text" class="form-control" id="user_login" name="user_login"
                               placeholder="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="user_nicename">昵称</label>
                        <input type="text" class="form-control" id="user_nicename" name="user_nicename"
                               placeholder="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="user_email">邮箱</label>
                        <input type="text" class="form-control" id="user_email" name="user_email"
                               placeholder="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="user_mobile_phone">手机</label>
                        <input type="text" class="form-control" id="user_mobile_phone" name="user_mobile_phone"
                               placeholder="">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="user_status">状态</label>
                        <select id="user_status" name="user_status" class="form-control">
                            <option value="0">未激活</option>
                            <option value="1">激活</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label for="display_name">显示名称</label>
                        <input type="text" class="form-control" id="display_name" name="display_name"
                               placeholder="">
                    </div>
                </div>
            </div>
            <input type="hidden" name="user_id" id="user_id"/>
        </form>
    </div>
    <div class="box-footer">
        <button type="button" class="btn btn-primary pull-right" id="user-save-btn">创建</button>
    </div>
</div>


{% end %} {% block footer%}
<script src="{{static_url('theme/plugins/datatables/jquery.dataTables.min.js')}}" type="text/javascript"></script>
<script src="{{static_url('theme/plugins/datatables/dataTables.bootstrap.min.js')}}" type="text/javascript"></script>
<script src="{{static_url('theme/plugins/select2/select2.full.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    function bo_user_edit_panel_return(){
        $('#user-edit-panel').hide();
        $('#user-list-panel').show();
    }
    function bo_user_edit_swith(title, btn_label){
        document.getElementById("user-edit-form").reset();
        $("#user_id").val("");
        $('#user-save-btn').html(btn_label);
        $('#user-edit-panel-title').html(title);
        $('#user-list-panel').hide();
        $('#user-edit-panel').show();
    }
    function bo_datatables_sel_all(elm) {
        var b = $(elm).prop("checked");
        $("#bo_users_list").find("input.bo_datatables_row_checkbox").each(function() {
            $(this).prop("checked", b);
        });
    }

    function bo_datatables_actions_bar(actions, apply_func_name) {
        var html = '<div class="bo_datatables_actions_bar">';
        html += '<select name="bo_datatables_batch_actions" class="form-control">';
        html += '<option value="-1">批量操作</option>';

        for (var k = 0; k < actions.length; k++) {
            html += '<option value="' + actions[k][0] + '">' + actions[k][1] + '</option>';
        }
        html += '<select>';
        html += '<button type="button" class="btn btn-default btn-sm" style="margin-left:5px;" onclick="' + apply_func_name + '(this);">应用</button>';
        html += '</div>';
        return html;
    }

    function bo_datatables_row_actions(title, menus, pk, action_func_name) {
        var html = '<div class="btn-group">';
        html += '<button type="button" class="btn btn-default btn-xs">' + title + '</button>';
        html += '<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">';
        html += '<span class="caret"></span>';
        html += '<span class="sr-only">Toggle Dropdown</span>';
        html += '</button>';
        html += '<ul class="dropdown-menu" role="menu">';
        for (var k = 0; k < menus.length; k++) {
            if (menus[k] == "|" || menus[k][0] == "|") {
                html += '<li class="divider"></li>'
            } else {
                html += '<li><a href="#" data-pk="' + pk + '" data-action="' + menus[k][0] + '" onclick="' + action_func_name + '(this);">' + menus[k][1] + '</a></li>';
            }
        }
        html += '</ul>';
        html += '</div>';
        return html;
    }
    function bo_users_row_actions(elm){
        var pk = $(elm).data("pk");
        var action = $(elm).data("action");
        if(action=="edit"){
            bo_user_edit_swith('用户资料修改', '保存');
            $.post('{{api("bo_users_get")}}', {"pk":pk}, function(rsp){
                if(rsp.success){
                    var base=rsp.data;
                    $("#display_name").val(base.display_name);
                    $("#user_email").val(base.user_email);
                    $("#user_login").val(base.user_login);
                    $("#user_mobile_phone").val(base.user_mobile_phone);
                    $("#user_nicename").val(base.user_nicename);
                    $("#user_status").val(base.user_status);
                    $("#user_id").val(base.user_id);
                    user_roles_select2.val(base.user_roles).trigger("change");
                }
            }, "json");
        }
    }
    var bo_users_datatables = null;
    var user_roles_select2 = null;
    $(document).ready(function() {
        user_roles_select2 = $('.select2-roles').select2({});
        $("#user-edit-panel").hide();
        bo_users_datatables = $('#bo_users_list').DataTable({
            "processing": true,
            "ordering": false,
            "serverSide": true,
            "info": true,
            responsive: true,
            "language": '',
            "sDom": "<'row'<'col-sm-8 bo_datatables_actions'><'col-sm-4'f>r>t<'row'<'col-sm-8'i><'col-sm-4'p>>",
            "ajax": {
                url: "{{api('bo_users_list')}}",
                type: "POST",
                "data": function(d) {
                    // d.custom = $('#myInput').val();
                    // etc
                }
            },
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            "columns": [{
                "data": "user_id"
            }, {
                "data": "user_login"
            }, {
                "data": "user_nicename"
            }, {
                "data": "user_email"
            }, {
                "data": "user_mobile_phone"
            }, {
                "data": "user_status"
            }, {
                "data": "display_name"
            }, {
                "data": "user_registered"
            }],
            "columnDefs": [{
                //user_id
                "render": function(data, type, row) {
                    return '<input type="checkbox"  class="bo_datatables_row_checkbox" name="primarykeys" value="' + data + '"/>';
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 0
            }, {
                //user_login
                "render": function(data, type, row) {
                    var menus = [
                        ['edit', '编辑'],
                        ['delete', '删除']
                    ];
                    return bo_datatables_row_actions(data, menus, row.user_id, "bo_users_row_actions");
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 1
            }, {
                //user_nicename
                "render": function(data, type, row) {
                    return data;
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 2
            }, {
                //user_email
                "render": function(data, type, row) {
                    return data;
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 3
            }, {
                //user_mobile_phone
                "render": function(data, type, row) {
                    return data;
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 4
            }, {
                //user_status
                "render": function(data, type, row) {
                    if (data == 1) {
                        return '<a href="#">已激活</a>';
                    }
                    return '<a href="#">未激活</a>';
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 5
            }, {
                //display_name
                "render": function(data, type, row) {
                    return data;
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 6
            }, {
                //user_registered
                "render": function(data, type, row) {
                    return data;
                },
                "searchable": false,
                "orderable": false,
                "visible": true,
                "targets": 7
            }],
            "order": [],
            "footerCallback": function(row, data, start, end, display) {
                var api = this.api();
                $(api.column(7).footer()).html("");
            }
        });
        $("#bo_users_list_wrapper").find("div.bo_datatables_actions").html(bo_datatables_actions_bar([
            ['delete', '删除']
        ]));
    });
    $("#user-save-btn").click(function(){
        $.post('{{api("bo_users_save")}}', $("#user-edit-form").serialize(), function(rsp){
        if (rsp.success) {
                    bo_alert_success("用户资料", "保存成功!")
                    bo_users_datatables.ajax.reload(null, false);
                } else {
                    bo_alert_error("用户资料", "保存失败!")
                    bo_valid_errors("user-edit-form", rsp.data, rsp.message);
                }
        }, "json");
    });


</script>
{% end %}